<template>
  <div class="vscode">
    <el-container class="container">
      <el-aside class="aside">
        <el-button v-if="data.length == 0" type="primary" @click="openDir">打开文件夹</el-button>
        <el-tree
            v-else
            :data="data"
            :props="props"
            style="max-width: 600px;background: #282c34"
            @node-click="handleNodeClick"
        />
      </el-aside>
      <el-main>
        <highlightjs :code="code" autodetect/>
      </el-main>
    </el-container>

  </div>
</template>
<script setup>
import {ref} from "vue";

const handleNodeClick = async (e) => {
  console.log(e)
  if (e.kind == 'file') {
    const file = await e.getFile()
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      console.log(e.target.result)
      code.value = e.target.result
    }
    fileReader.readAsText(file)
  }

}
const props = {
  value: 'name',
  label: 'name',
  children: 'children',
}
const data = ref([])
const code = ref('')
const openDir = async () => {
  try {
    const handle = await window.showDirectoryPicker()
    await processHandle(handle)
    data.value = [handle]
    console.log(data.value)
    //拿文件

  } catch (e) {
    console.log(e)
  }

}
const processHandle = async (handle) => {
  //判断是文件夹还是文件
  if (handle.kind === 'file') {
    return
  }
  handle.children = [];
  //拿到文件夹里面的东西 返回内容放在异步迭代器中
  const iter = await handle.entries();
  for await (const entry of iter) {
    await processHandle(entry[1])
    handle.children.push(entry[1])
  }
}
</script>
<style lang="scss" scoped>
.vscode {
  background: #282c34;
  width: 100%;
  height: 500px;
}

.container {
  width: 100%;
  height: 100%;
}

.aside {
  border-right: 1px solid #fff;
  height: 100%;
  background: #282c34;
}
</style>